<template>
  <div>
    <el-card>
      <!-- 搜索栏 -->
      <SearchForm
        :form-option="formOption"
        :show-btn="true"
        :btn-list="btnList"
        v-model="formOption.formData"
        label-width="90px"
      />

      <!-- 数据表格 start -->
      <PageTable
        :loading="loading"
        :data="dataSource"
        :columns="columns"
        :options="options"
        @selectChange="selectChange"
      />
      <Pagination
        v-show="total > 0"
        :total="total"
        :pageNo.sync="listQuery.pageNo"
        :pageSize.sync="listQuery.pageSize"
        @pagination="getRelevancyClientList"
      />
      <!-- 数据表格 end -->

      <!-- 导入客户弹窗 -->
      <CompanyImportUserInfo
        :dialogVisible.sync="dialogVisible"
        v-if="dialogVisible"
        @update="getRelevancyClientList"
      />
    </el-card>
  </div>
</template>

<script>
import { export2Excel } from '@/utils/export'
import CompanyImportUserInfo from './CompanyImportUserInfo.vue'

export default {
  name: 'CompanyInfoRelevancyClient',
  components: {
    CompanyImportUserInfo
  },
  props: {},
  data() {
    return {
      // 导入弹窗状态
      dialogVisible: false,
      // 表单搜索配置
      formOption: {
        items: [
          {
            type: 'daterange',
            label: '充值时间',
            value: 'time',
            valueFormat: 'yyyy-MM-dd HH:mm:ss'
          },
          {
            type: 'input',
            label: '客户名称',
            value: 'nickNameOrMobile'
          }
        ],
        formData: {}
      },
      // 表单按钮列表
      btnList: [
        {
          type: 'primary',
          label: '搜索',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getRelevancyClientList()
          }
        },
        {
          type: 'primary',
          label: '导入客户',
          onClick: () => this.importUserFile()
        },
        {
          label: '导出',
          onClick: () => this.exportFile()
        }
      ],

      // 分页配置
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,

      // 表格加载
      loading: true,
      // 表格配置
      options: {
        border: true,
        select: true
      },
      // 表格列配置
      columns: [
        {
          label: '客户信息',
          render: (h, { row }) => {
            return (
              <div class="flex align-start">
                <el-image style="width: 40px; height: 40px" src={row.profilePhoto}></el-image>
                <div class="ml-5">
                  <div class="flex">
                    <p>{row.nickName}</p>
                    {!row.isActivation ? (
                      <el-tag
                        class="ml-5"
                        size="mini"
                        type="danger"
                        effect="dark"
                        style="background:#ff5f00"
                      >
                        待激活
                      </el-tag>
                    ) : (
                      ''
                    )}
                  </div>
                  <p>{row.mobile}</p>
                </div>
              </div>
            )
          }
        },
        {
          label: '累计赠送积分',
          prop: 'integralSum',
          render: (h, { row }) => {
            return <div>{row.integralSum || 0}积分</div>
          }
        },
        { prop: 'registerTime', label: '注册时间' }
      ],
      // 表格源数据
      dataSource: [],
      // 选择数据
      selectList: []
    }
  },
  computed: {},
  watch: {},
  created() {
    // 获取关联用户列表
    this.getRelevancyClientList()
  },
  methods: {
    // 获取关联用户列表
    async getRelevancyClientList() {
      try {
        // 参数整合
        const params = {
          ...this.listQuery,
          etpId: this.$route.query.id,
          nickNameOrMobile: this.formOption.formData.nickNameOrMobile || '',
          startTime: this.formOption.formData.time?.[0] ?? '',
          endTime: this.formOption.formData.time?.[1] ?? ''
        }
        const {
          data: { records, total }
        } = await this.$http.user.company.getRelationUserInfo({ params })
        this.dataSource = records
        this.total = total
        this.loading = false
      } catch (error) {
        console.log('getRelevancyClientList', error)
      }
    },

    // 选择列表
    selectChange(rows) {
      this.selectList = rows
    },

    // 点击导出
    exportFile() {
      if (!this.selectList.length) return this.$message.error('请选择要导出的数据')
      // 表头设置
      const headers = this.columns.filter(el => el.prop).map(el => el.label)
      headers.splice(0, 0, '昵称')
      headers.splice(1, 0, '手机号')
      // 表格数据字段
      const filterData = this.columns.filter(el => el.prop).map(el => el.prop)
      filterData.splice(0, 0, 'nickName')
      filterData.splice(1, 0, 'mobile')
      const tableData = this.selectList.map(el => {
        return {
          ...el,
          integralSum: el.integralSum || 0
        }
      })
      export2Excel(headers, tableData, filterData, '关联客户列表', () => {
        this.$message.success('导出成功')
      })
    },

    // 导入客户
    importUserFile() {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped></style>
